<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Loading(加载) 动画效果2</title>
</head>
<body>
<h2>加载样式</h2>
<p><strong>注意:</strong>  -webkit- 和 -ms- 前缀用于那些不支持 animation 和 transform 属性的浏览器。</p>

<div class="loader"></div>
</body>
<style>
    .loader{
        width: 120px;
        height: 120px;
        border: 10px solid black;
        border-radius: 50%;
        border-top:10px solid red;
        border-bottom: 10px solid green;
        animation: quan 1s linear infinite;
    }
    @keyframes quan {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }

    }
</style>
</html>
